<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/all-like-orderlist.css">
    <link rel="stylesheet" href="../../css/jquery.pagination.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.js"></script>
    <title>框架</title>
</head>
<body>
<!--头部-->
<div class="container_fluid">
    <div class="header row">
        <div class="logo col-md-1"><img src="../../images/washer.png" alt=""></div>
        <div class="tips col-md-2" style="float: right">
            <div class="collapse navbar-collapse fr" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/user/logout">账号退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--内容-->
<div class="container-fluid">
    <div class="solid-hr row"></div>
    <form class="select-option row">
        <!--始末日期-->
        <div class="form-group fl form-style" style="margin-bottom: 10px">
            <input id="userId" type="hidden" th:value="${userInfo.id}"/>
            <div class='input-group date' id='datetimepicker' style="width: 15%;float:left">
                <span class="input-group-addon"> <span
                        class="glyphicon glyphicon-user"></span> </span><input type='text' class="form-control"
                                                                               id="name" th:value="${userInfo.name}"
                                                                               disabled="disabled"/>
            </div>

            <div class='input-group date' id='datetimepicker2' style="width: 20%;padding-left: 5%; float: left">
               <span class="input-group-addon"> <span
                       class="glyphicon glyphicon-phone"></span> </span> <input type='text' class="form-control"
                                                                                id="phone" th:value="${userInfo.phone}"
                                                                                disabled="disabled"/>
            </div>
            <div class='input-group date' id='datetimepicker3' style="width: 20%;padding-left: 5%; float: left">
               <span class="input-group-addon"> <span
                       class="glyphicon glyphicon-shopping-cart"></span> </span> <input type='text' class="form-control"
                                                                                        th:value="${userInfo.balance}"
                                                                                        id="money" disabled="disabled"/>
            </div>

            <div style="float: right;">
                <label for="orderId"> 订单号： </label>
                <input class="order-num" id="orderId" type="text" style="width: 50%" value="" placeholder="请输入订单号">
                <input type="button" class="btn btn-success sub" onclick="selectOrder()" value="查询">
            </div>
        </div>

    </form>
    <div class="operation row">
        <button class="btn delete delbtn" id="recharge" data-toggle="modal" data-target="#rechargeModal">充值</button>
        <button class="btn btn-success distribute" id="order" data-toggle="modal" data-target="#orderModal">预约订单
        </button>
    </div>
    <!--表格-->
    <div class="table-list row">
        <table class="table table-bordered">
            <thead>
            <tr class="active">
                <td>订单编号</td>
                <td>顾客名称</td>
                <td>业务员姓名</td>
                <td>支付金额</td>
                <td>订单状态</td>
                <td>下单时间</td>
                <td>业务员电话</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tb">
            <span th:each="p : ${pagination.list}">
            <tr>
                <td th:text="${p.form.orderId}">hys20180716</td>
                <td th:text="${p.form.customerName}">张三</td>
                <td th:text="${p.form.salesmanName}">245</td>
                <td th:text="${p.form.money}">280</td>
                <td th:text="${p.status}">结束状态</td>
                <td th:text="${p.form.formDate}">2018-07-16</td>
                <td th:text="${p.form.phone}">280</td>
                <td><img src="../../images/edit.png" data-toggle="modal" data-target="#stateModal" onclick="lick(this, this.id)" data-whatever="修改订单"/></td>
            </tr>
            </span>
            </tbody>
        </table>
    </div>
    <!--分页-->
    <div class="page-right">
        <div id="pagination" class="page fl"></div>
    </div>
    <span th:text="${pagination.totalPage}"style="display: none"id="totalPage"></span>
</div>
<!--底部-->
<div class="container-fluid bg_footer clearfix">
    <div class="footer row">
        Copyright ©2018 hysSystem All Rights Reserved
    </div>
</div>
<!--充值弹框-->
<div class="modal fade" id="rechargeModal" tabindex="-1" role="dialog" aria-labelledby="rechargeModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 60%;margin-left: 15%;margin-top: 15%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="rechargeModalLabel">充值</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group" style="width: 50%;margin: 30px;">
                        <label for="recharge-money" class="control-label"><i>*</i>充值金额:</label>
                        <input type="text" class="form-control" id="recharge-money">
                        <span id="rechargeText"></span>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button id="rechargeBtn" type="button" class="btn btn-primary">充值</button>
                <button type="button" class="btn btn-default btn-333" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--预约订单弹框-->
<div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="orderModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="orderModalLabel">预约订单</h4>
            </div>
            <div class="modal-body" style="margin: 20px;">
                <form>
                    <div class="form-group" style="width: 20%;">
                        <label for="order-money" class="control-label"><i>*</i>支付金额:</label>
                        <input type="text" class="form-control" id="order-money" value="20" disabled="disabled"/>
                    </div>
                    <div class="form-group">
                        <label for="address" class="control-label"><i>*</i>填写地址:</label><br/>
                        <select id="cq" class="form-control" style="width: 20%;float: left">
                            <option selected="selected">重庆市</option>
                        </select>
                        <select id="address" class="form-control" style="width: 20%;float: left;">
                            <option selected="selected">------</option>
                            <option>渝中区</option>
                            <option>渝北区</option>
                            <option>江北区</option>
                            <option>沙坪坝区</option>
                            <option>九龙坡区</option>
                            <option>南岸区</option>
                            <option>北倍区</option>
                            <option>大渡口区</option>
                            <option>巴南区</option>
                        </select>
                    </div>
                    <br/><br/>
                    <div class="form-group" style="">
                        <label for="order-address" class="control-label"><i>*</i>填写具体地址:</label>
                        <input type="text" class="form-control" id="order-address" style="width: 60%;"/>
                    </div>
                    <div class="form-group">
                        <label for="order-center" class="control-label"><i>*</i>选择洗衣中心:</label>
                        <select id="order-center" class="form-control" style="width: 40%;">

                        </select>
                    </div>
                    <span id="order-text"></span>
                </form>
            </div>
            <div class="modal-footer">
                <button id="orderBtn" type="button" class="btn btn-primary">支付</button>
                <button type="button" class="btn btn-default btn-333" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--查看状态弹框-->
<div class="modal fade" id="stateModal" tabindex="-1" role="dialog" aria-labelledby="rechargeModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="stateModalLabel">查看状态</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="order-id" class="control-label"><i>*</i>订单号:</label>
                    <input type="text" class="form-control" id="order-id"  disabled="disabled"/>
                </div><br/>
                <div class="form-group state">
                </div>
            </div>
            <div class="modal-footer">
                <button id="stateBtn" type="button" class="btn btn-primary">充值</button>
                <button type="button" class="btn btn-default btn-333" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery.pagination.min.js"></script>
<script>
    var totalPage = $("#totalPage").text();

    $("#pagination3").pagination({
        totalPage: totalPage,
        isShow: true,
        count: totalPage,
        homePageText: "首页",
        endPageText: "尾页",
        prevPageText: "上一页",
        nextPageText: "下一页",
        callback: function(current){
            page(current)
        }
    })
    function selectOrder(){
        page(1);
    }
    function page(current) {
        var orderId  = $("#orderId").val();
        var Pagination  ={
            currentPage : current-1,
            size : 8,
            orderId : orderId
        }
        if(current <= totalPage){
            var html ='';
            $.ajax({
                url:"/user/order",
                contentType:"application/json; charset=utf-8",
                type:"post",
                data : JSON.stringify(Pagination),
                success:function(data){
                    $(".old").css("display","none");
                    $.each(data.list,function (n,val) {
                        html += " <tr>" +
                            "<td>"+val.form.orderId+"</td>"+
                            "<td>"+val.form.customerName+"</td>"+
                            "<td>"+val.form.salesmanName+"</td>"+
                            "<td>"+val.form.money+"</td>"+
                            "<td>"+val.status+"</td>"+
                            "<td>"+formatDate(new Date(val.form.formDate))+"</td>"+
                            "<td>"+val.form.phone+"</td>"+
                            "<td><img src='../../images/edit.png' data-toggle='modal' data-target='#exampleModal' onclick='lick(this, this.id)' data-whatever='修改订单'/></td>"+
                            "</tr>"
                    })
                    if(html == ""){
                        html = "<tr> <td style='background-color: #E6E6E6;height:200px; text-align: center;padding-top: 100px' colspan=10><h4 style='color: #A4A4A4;'>没有满足该条件的记录</h4></td></tr>"
                    }
                    $("#tb").html(html);

                },

            });
        }

    }
    function formatDate(now) {
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        if (month < 10) {
            month = "0" + month;
        }
        if (date < 10) {
            date = "0" + date;
        }
        if (minute < 10) {
            minute = "0" + minute;
        }
        if (hour < 10) {
            hour = "0" + hour;
        }
        if (second < 10) {
            second = "0" + second;
        }
        return year + "-" +month +"-"+date +" "+hour + ":" + minute + ":" + second;
    }
    $(function () {
        $("#recharge").click(function () {
            $("#rechargeText").html("");
            $("#recharge-money").val("");
        });
        /*充值*/
        $("#rechargeBtn").click(function () {

            var rechargeDto = {
                userId: $("#userId").val(),
                money: $("#recharge-money").val()
            };


            $.ajax({
                url: "/user/recharge",
                contentType: "application/json; charset=utf-8",
                type: "post",
                data: JSON.stringify(rechargeDto),
                success: function (data) {
                    var $rechargeText = $("#rechargeText");

                    if (data.code == "0") {
                        alert("充值成功!")
                        window.location.href = "/user/order";
                    } else {
                        $rechargeText.html(data.msg);
                        $rechargeText.css("color", "red");
                    }
                }
            });
        });

        /*获取洗衣中心*/
        $("#address").change(function () {
            var address = $("#address option:selected").text();

            $.ajax({
                url: "/user/findCenter",
                contentType: "application/json; charset=utf-8",
                type: "post",
                data: address,
                success: function (data) {
                    var html = "";
                    var $order_center = $("#order-center");
                    if (data.code == 0) {
                        $.each(data.data, function (n, v) {
                            html += "<option>" + v + "</option>";
                        });
                        $order_center.html(html).css("color", "black");
                    } else {
                        $order_center.html("<option>" + data.msg + "</option>").css("color", "red");
                    }
                }
            });
        });

        $("#order").click(function () {
            $("#order-address").val("");
            $("#order-text").html("");
        });

        /*支付*/
        $("#orderBtn").click(function () {

            var order = {
                name: $("#name").val(),
                address: $("#cq option:selected").text() + $("#address option:selected").text(),
                orderAddress: $("#order-address").val(),
                money: $("#order-money").val(),
                center: $("#order-center option:selected").text()
            };

            $.ajax({
                url: "/user/orderPay",
                contentType: "application/json; charset=utf-8",
                type: "post",
                data: JSON.stringify(order),
                success: function (data) {
                    var $order_text = $("#order-text");
                    if (data.code == "0") {
                        alert("支付成功!");
                        window.location.href = "/user/order";
                    } else {
                        $order_text.html(data.msg);
                        $order_text.css("color", "red");
                    }
                }
            });
        });
    });
    function lick(obj, id) {
        var td_content = $(obj).parents("tr").children("td");  //获取当前行中的所有td值
        var order_id = td_content.eq(0).text(); //获取订单编号
        $("#order-id").val(order_id);

        $.ajax({
            url: "/user/getState",
            contentType: "application/json; charset=utf-8",
            type: "post",
            data: order_id,
            success: function (data) {
                var html = '';
                $.each(data,function (n,v) {
                   html += "<p><span>"+v.formDate +"</span><span>- - - - -</span><span>"+ v.stateName +"</span></p>";
                });
                $(".state").html(html);
            }
        });
    }
</script>
</body>
</html>